<template>
	<!--:class="isactive?'actives':''"-->
		<div class="batch" @click.stop="chose">
			<div class="batch_top">
				<p class="isshow">系统</p>
				<p class="namestext">{{jsonlist.batchName}}</p>
				<div class="timeconent">
					<p>{{jsonlist.effectiveDate}}</p>
					<p class="division">到</p>
					<p v-if="jsonlist.expiryDate">{{jsonlist.expiryDate}}</p>
					<p v-else>不限</p>
				</div>
			</div>
			<div class="batch_bom">
				查看
			</div>
		</div>
</template>

<script>
	export default{
		data(){
			return {
				isactive:false
			}
		},
		props:["jsonlist",'indexnum'],
		mounted(){
				console.log("555")
				console.log(this.indexnum)
		},
		methods:{
			chose(){
				this.isactive=!this.isactive
				this.$emit("chose",this.indexnum,this.isactive)
			}
		}
	}
</script>

<style lang="scss" scoped>
*{
	margin:0;
}
	.batchconent{
		margin-top:20px;
		width:100%;
		height:260px;
		overflow:hidden;	
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.batch{
		width:204px;
		height:90px;
		background: #FFFFFF;
		border: 1px solid #D9D9D9;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
		margin-bottom:40px;
		margin-right:63px;
		outline:none;
		cursor:pointer;
		.batch_top{
			width:100%;
			height:68.5px;
			position:relative;
			display:flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			.namestext{
				width:138px;
				height:14px;
				font-size: 10px;
				color: #666666;
				text-align:center;
				margin-top:10px;
				margin-bottom:7px;
			}
			.timeconent{
				width:168px;
				height:35px;
				display:flex;
				justify-content: space-around;
				align-items: center;
				background: rgba(232,232,232,0.50);
				border-radius: 5px;
				font-size:12px;
				padding:0 5px;
				p{
					flex:5;
					text-align:center;
				}
				.division{
					flex:1;
					margin:0 5px;
				}
			}
			.isshow{
				position:absolute;
				top:0px;
				left:5px;
				width:18px;
				height:30px;
				background: #FB777D;
				color: #FFFFFF;
				font-size:10px;
				display:flex;
				text-align:center;
				align-items: center;
			}
		}
		.batch_bom{
			height:19.5px;
			width:100%;
			box-sizing: border-box;
			border-top:1px solid #E8E8E8;
			font-size: 11px;
			color: #027DCA;
			display:flex;
			justify-content: center;
			align-items: center;
		}
	}
	.activeclass{
		border: 1px solid red;
		.batch_bom{
			border-top: 1px solid red;
		}
	}
</style>